<div class="row">
    <div id="tab" class="col-10">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link disabled" id="comics_rank-tab" data-toggle="pill" href="#comics_rank" role="tab"
                   aria-controls="comics_rank"
                   aria-selected="true">排行榜</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" id="comics_read_rank-tab" data-toggle="pill" href="#comics_read_rank"
                   role="tab"
                   aria-controls="comics_rank" aria-selected="true">阅读量</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="comics_collection_rank-tab" data-toggle="pill" href="#comics_collection_rank"
                   role="tab"
                   aria-controls="comics_collection_rank" aria-selected="false">收藏量</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="tab-content col-10 " id="pills-tabContent">
        {#阅读量#}
        <div class="tab-pane fade show active" id="comics_read_rank" role="tabpanel"
             aria-labelledby="comics_read_rank-tab">
            {% for comic in comics_read_rank %}
            <a href="{% url 'Comics:cover' comic.cId %}">
                <figure class="figure">
                    <img src="{{comic.cCover}}" class="figure-img img-fluid rounded" alt="{{comic.fName}}">
                    <figcaption class="figure-caption text-center">
                        {{forloop.counter}}.{{comic.cName}}
                    </figcaption>
                </figure>
            </a>
            {% endfor %}
        </div>
        {#收藏量#}
        <div class="tab-pane fade" id="comics_collection_rank" role="tabpanel"
             aria-labelledby="comics_collection_rank-tab">
            {% for comic in comics_collection_rank %}
            <a href="{% url 'Comics:cover' comic.cId %}">
                <figure class="figure">
                    <img src="{{comic.cCover}}" class="figure-img img-fluid rounded" alt="{{comic.fName}}">
                    <figcaption class="figure-caption text-center">
                        {{forloop.counter}}.{{comic.cName}}
                    </figcaption>
                </figure>
            </a>
            {% endfor %}
        </div>
    </div>
</div>
